<template>
	<view>
		<navbox title="友情链接"></navbox>
		<view style="margin-top: 190rpx;">
			<u-grid :border="true" col="3">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="click(listItem)">
					<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}"
						:name="listItem.logo"
						:size="60"></u-icon> -->
					<u-image :src="listItem.logo" :lazy-load="true" mode="aspectFit" width="80" height="80"></u-image>

					<text class="grid-text">{{listItem.name}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<u-popup :show="show" @close="close" @open="open" mode="center" round="10" zoom="false">
			<view>
				<view style="display: flex;align-items: center;justify-content: space-around;width: 520rpx;">
					<u-image
						:src="item.logo"
						:lazy-load="true" mode="aspectFit" width="100" height="100"></u-image>
					<view style="margin-left: 0rpx;">
						<u--text type="primary" :text="item.name"></u--text>
						<view style="display: flex;align-items: center;justify-content: start;margin-top: 20rpx;">
							<u-tag :text="'Id:'+item.id" size="mini" type="warning"></u-tag>
							<view style="width: 15rpx;"></view>
							<u-tag text="开发者" size="mini"></u-tag>
						</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;margin-left: 85rpx;margin-top: -20rpx;margin-bottom: 20rpx;">
					<u-icon name="share-square" color="#cecece" size="20"></u-icon>
					<u--text mode="link" text="Go to Jump link" :href="item.address" align="center"></u--text>
				</view>
				<view style="text-align: center;padding-bottom: 30rpx;">
			        简介：{{item.description}}
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import navbox from '../components/navbox/navbox.vue'
	export default {
		data() {
			return {
				show: false,
				list: [],
				item: {}
			}
		},
		components: {
			"navbox": navbox
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/sgLink',
				})
				this.list = res.data.data

				uni.hideLoading();
			},
			click(name) {
				this.item = name
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}

	}
</script>

<style>
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
